<template>
  <div class="home">
    <!-- 全局 -->
    <el-container class="layout-container-demo">
      <!-- 侧面板 -->
      <el-aside
        :width="sidWidth + 'px'"
        :class="{ show: isMobileSidebarVisible }"
      >
        <common-aside
          :isCollapse="isCollapse"
          :logoTextShow="logoTextShow"
        ></common-aside>
      </el-aside>

      <!-- 内容 -->
      <el-container>
        <!-- 头部 -->
        <el-header style="text-align: right; font-size: 12px">
          <common-header
            :users="user"
            :collapseBtnClass="collapseBtnClass"
            :collapse="collapse"
          ></common-header>
        </el-header>
        <!-- 主面板 -->
        <el-main>
          <el-scrollbar>
            <!-- 路由的占位符 -->
            <!-- 当前子路由会在 router-view里面展示 -->
            <router-view @refreshUser="getUser"></router-view>
            <!-- <common-main></common-main> -->
          </el-scrollbar>
        </el-main>
        <el-footer>
          <common-footer></common-footer>
        </el-footer>
      </el-container>
      <!-- 遮罩层 -->
      <div
        class="mask"
        v-show="isMobileSidebarVisible"
        @click="hideSidebarOnMobile()"
      ></div>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// common
import CommonAside from '@/components/usercommon/UserCommonAside.vue'
import CommonHeader from '@/components/usercommon/UserCommonHeader.vue'
import CommonFooter from '@/components/usercommon/UserCommonFooter.vue'

export default {
  name: 'MangesV',
  data() {
    return {
      // 侧边栏收缩
      isCollapse: false,
      // aside边框
      sidWidth: 200,
      // 显示文字
      logoTextShow: true,
      // 收缩图标
      collapseBtnClass: 'Expand',
      user: {},
      //手机下的遮罩层
      isMobileSidebarVisible: false
    }
  },
  created() {
    // 从后台获取最新的User数据
    this.getUser()
  },

  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    closeaside() {
      this.isCollapse = true
      this.isMobileSidebarVisible = false
      this.collapseBtnClass = 'Fold'
      this.logoTextShow = false
    },
    openaside() {
      this.isCollapse = false
      this.isMobileSidebarVisible = true
      this.collapseBtnClass = 'Expand'
      this.logoTextShow = true
    },

    handleResize() {
      if (window.innerWidth <= 960) {
        this.closeaside()
        this.sidWidth = 0
      } else {
        this.openaside()
        this.sidWidth = 200
      }
    },
    //伸缩图标
    collapse() {
      this.isMobileSidebarVisible = true
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        //收缩
        this.sidWidth = 64
        this.closeaside()
      } else {
        this.sidWidth = 200
        this.openaside()
      }
    },

    getUser() {
      // 从后台获取数据
      let ids = localStorage.getItem('user')
        ? JSON.parse(localStorage.getItem('user')).id
        : ''

      this.$http.get('/user/' + ids).then((res) => {
        //从新赋值最新的User数据
        this.user = res.data
      })
    },

    // 遮罩层
    hideSidebarOnMobile() {
      console.log('遮罩层')
      // this.isMobileSidebarVisible = false
      this.sidWidth = 0
      this.closeaside()
    }
  },
  components: {
    // commont
    CommonAside,
    CommonHeader,
    CommonFooter
  }
}
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  display: none;
}
.home,
.el-container {
  height: 100vh;

  .el-header {
    height: 60px;
    // border-bottom: 1px solid #000;
    // background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }

  .el-aside {
    color: var(--el-text-color-primary);
    // background: var(--el-color-primary-light-8);
    background-color: rgb(238, 241, 246);
    box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  }
  .el-header {
    box-shadow: 2px 0px 10px rgb(0 21 41 / 35%);
  }
}
@media screen and (max-width: 767px) {
  .el-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
  }

  .is-collapse {
    width: 0;
  }
  .mask {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .el-aside {
    display: none;
  }
}
</style>
